<template>
	<NavBar :obj="{ title: '店铺股东', color: '#000', backgroundColor: '#fff' }" />
	<up-sticky :offset-top="offsetTop">
		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				lineColor="#F81A2E"
			></up-tabs>
		</view>
	</up-sticky>
	<view class="container">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<view class="fill">
			<view class="infos flex items-center justify-between" v-for="(item, index) in list" :key="index">
				<view class="photo">
					<image :src="imgUrl + item.photo"></image>
				</view>
				<view class="composite flex-1">
					<view class="nickname-top flex items-center">
						<view class="nickname line-1-clamp" style="max-width: 50%">{{ item.nickname }}</view>
					</view>
					<view class="bottom flex items-center">
						<view class="item flex items-center">
							<text>{{ item.mobile }}</text>
						</view>
						<view class="item">
							<text>ID：{{ item.code }}</text>
						</view>
					</view>
				</view>
				<view class="btns flex items-center">
					<view class="add-btn" @click="examine(item, 3)" v-if="listRef.audit_status == 1">拒绝</view>
					<view class="add-btn success" @click="examine(item, 2)" v-if="listRef.audit_status == 1">通过</view>
					<view class="add-btn del" @click="delShareholder(item)" v-if="listRef.audit_status == 2">删除</view>
				</view>
			</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, inject } from 'vue';
	import { port, goUrl, imgUrl, loading, closeLoading, hint } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	const list = ref([]);
	const title = ref('');
	const showLoad = ref(true);
	const listRef = ref({
		page: 1,
		audit_status: 1
	});

	const condition = reactive([
		{ name: '待审核', val: 1 },
		{ name: '已添加', val: 2 },
		{ name: '未通过', val: 3 }
	]);

	function conditionCah(e) {
		listRef.value.audit_status = e.val;
		listRef.value.page = 1;
		list.value.length = 0;
		getMyShopShareholder();
	}
	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		listRef.value.page = 1;
		list.value.length = 0;
		getMyShopShareholder();
	});

	onReachBottom(() => {
		getMyShopShareholder();
	});

	async function examine(item, type) {
		uni.showModal({
			title: '请确认',
			content: '确定要' + (type == 2 ? '通过审核' : '拒绝审核') + '吗？',
			confirmColor: '#F81A2E',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('auditShareholder', { id: item.id, audit_status: type });

					setTimeout(() => {
						hint(res.msg);
						closeLoading();
						listRef.value.page = 1;
						list.value.length = 0;
						getMyShopShareholder();
					}, 300);
				}
			}
		});
	}

	async function delShareholder(item) {
		uni.showModal({
			title: '请确认',
			content: '确定要删除此股东吗？',
			confirmColor: '#F81A2E',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('delShareholder', { id: item.id });

					setTimeout(() => {
						hint(res.msg);
						closeLoading();
						listRef.value.page = 1;
						list.value.length = 0;
						getMyShopShareholder();
					}, 300);
				}
			}
		});
	}

	async function getMyShopShareholder() {
		showLoad.value = true;
		let res = await port('getMyShopShareholder', listRef.value);
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .uni-nav-bar-right-text {
		font-weight: 400;
		font-size: 30rpx;
		color: #f81a2e !important;
	}

	.tabs {
		background-color: #fff;
	}
	.container {
		.fill {
			margin-top: 24rpx;
			.infos {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				border-bottom: 1rpx solid #eee;
				&:last-child {
					border-bottom: none;
				}
				.add-btn {
					font-weight: 400;
					font-size: 28rpx;
					color: #f81a2e;
					border-radius: 16rpx;
					border: 1px solid #f81a2e;
					padding: 6rpx 20rpx;
				}
				.success {
					background: linear-gradient(-90deg, #f81a2e 0%, #fc4856 100%);
					border: none;
					font-size: 28rpx;
					color: #ffffff;
					padding: 8rpx 20rpx;
					margin-left: 10rpx;
				}

				.del {
					color: #666666;
					border: 1px solid #cccccc;
				}

				.photo {
					background: #ffffff;
					// box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228, 47, 4, 0.26);
					border-radius: 50%;
					border: 5rpx solid #ffffff;
					width: 94rpx;
					height: 94rpx;
					> image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.composite {
					margin-left: 22rpx;
					.nickname-top {
						.nickname {
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.bottom {
						margin-top: 15rpx;
						gap: 35rpx;
						.item {
							> text {
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
</style>
